<template>
  <div>
	<!-- @->v-on :->v-bind -->
	<myheader :totalcount="this.totalcount()" :totalprice="this.totalprice()"></myheader>
	<!-- 面包屑导航 -->
	<Breadcrumb :datas = 'datas'></Breadcrumb>
	

	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img class="img-fluid" :src="src">
					</div>
					<!-- <div class="product-thumbnails"><a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
					</div> -->
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{ name }}</h2>
					<p class="lead mt-2 mb-3 primary-color">￥{{ price }}</p>
					<h5 class="mt-4">商品简介</h5>
					<p>{{ desc }}</p>
					<p>颜色:{{ color }}</p>
					<p>号码:{{ size }}</p>
					<p>季节:{{ season }}</p>
					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
					</select>
					
					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->

					<!-- 规避锚点 href="javascript:void(0)" -->
					<a href="javascript:void(0)" @click="add_cart" class="btn btn-full-width btn-lg btn-outline-primary">{{ $t('m.add_cart') }}</a></div>
					<h-switch v-model="flow" @change="flow_change">关注/取关</h-switch>
			</div>
		</div>
	</section>
	
	<div class="divider"></div>

	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">商品评论</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<textarea v-model="content"></textarea>
					<br>
					<Button color='blue' @click="comment">评论</Button>
				</div>
			</div>
		</div>
	</section>

	<div class="divider"></div>

	<!-- <section class="products text-center">
		<div class="container">
			<h3 class="mb-4">评论列表</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<table>
						<tr v-for="(item, index) in commentlist">
							管道调用
							<td>{{ item.uid | myfilter }}：{{ item.content }}</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</section> -->

	<comment :commentlist='this.commentlist' :myuser='this.myuser'></comment>

	<!-- HeyUI分页逻辑 -->
	<!-- <div>
		<Pagination v-model="pagination" @change="change" align="center" layout="total, pager, jumper" small></Pagination>
	</div> -->

	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>
// 导包
import myheader from './myheader'
import myfooter from './myfooter'
import comment from './comment'

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  // 声明面包屑导航
	  datas: [{title: '首页', route: {name: 'index'}}, {title: '商品详情页'}],
	  // 商品id
	  id: '',
	  name: '',
	  desc: '',
	  color: '',
	  size: '',
	  season: '',
	  price: '',
	  img: '',
	  src: '',
	  // 评论内容
	  content: '',
	  // 评论列表
	  commentlist: [],
	  // 用户信息字典
	  myuser: {},
	  // 分页器变量
	  pagination: {
		  page: 1,
		  size: 3,
		  total: 6
	  },
	  flow: false,
	  // 购物车列表
	  cartlist: []
    }
  },

  // 自定义过滤器
  filters: {
	  myfilter: function (value) {
		  // 通过key(用户id)取用户名
		  return window.that.myuser[value];
	  }
  },

  // 注册组件
  components: {
	  'myheader': myheader,
	  'myfooter': myfooter,
	  comment
  },

  // 在渲染之前就定义that变量
  beforeCreate: function () {
	  
  },

  // 钩子方法 
  mounted:function(){
	window.that = this;

	// 接收商品id
	var id = this.$route.query.id;
	this.id =id;

	// 调用商品信息接口
	this.getdata();

	// 调用评论列表接口
	this.getcomment();

	// 调用用户列表
	this.get_user();

	// 初始化购物车
	this.init_cart();
  },

  methods:{
	// 计算总价
	totalprice: function () {
		var total = 0
		for(let i = 0, l = this.cartlist.length; i < l; i++){	
			total += (this.cartlist[i].num * this.cartlist[i].price);
		}
		return total
	},

	// 计算购物车总数
	totalcount: function () {
		var total = 0
		for(let i = 0, l = this.cartlist.length; i < l; i++){	
			total += this.cartlist[i].num;
		}
		return total
	},
	
	// 初始化购物车逻辑
	init_cart: function () {
		// 将localStorage的数据赋给cartlist 字符串转成json
		var cart = localStorage.getItem('cart');
		if (cart) {
			this.cartlist = JSON.parse(cart)
		}
	},

	// 添加购物车逻辑
	add_cart: function () {
		var find = 0;

		// 需要商品数量 遍历购物车
		for(let i = 0, l = this.cartlist.length; i < l; i++){	
			// 如果找到了
			if(this.id == this.cartlist[i]['id']){
				// 将该商品的数量+1
				this.cartlist[i]['num']++;
				find = 1;
				break;
			}
		}
		// 如果没找到
		if (find==0) {
			// 不需要数量直接push 将该商品加入购物车列表  尾插 push
			this.cartlist.push({name: this.name, id: this.id, price: this.price, num: 1, img:this.img})
		}

		console.log(this.cartlist)

		// 存入localStorage json转成字符串
		localStorage.setItem('cart', JSON.stringify(this.cartlist))
	},

	// 关注与取关
	flow_change: function () {
		
	},
	
	// // 分页器事件
	// change: function () {
	// 	// 发送请求
	// 	this.axios.get('http://127.0.0.1:8000/commentlist/',{
	// 		params: {
	// 			id: this.id,
	// 			size:this.pagination.size,
	// 			page:this.pagination.page
	// 		}}).then((result) =>{

    //           console.log(result);
    //           this.datalist = result.data.data;
    //   })
	// },

	// 调用所有用户列表
	get_user: function () {
		// 发送请求
		this.axios.get('http://localhost:8000/userlist/').then((result) =>{
			console.log(result);  
			// 动态赋值
			for (let i = 0, l = result.data.length; i < l; i++){
				this.myuser[result.data[i].id] = result.data[i].username;
			}
			console.log(this.myuser);
      	})
	},

	// 获取评论列表
	getcomment: function () {
		// 发送请求
		this.axios.get('http://localhost:8000/commentlist/',{
			params: {
			  id: this.id,
			}}).then((result) =>{

			  console.log(result);
			  this.commentlist = result.data;
			  
      	})
	},

	// 评论方法
	comment: function () {
		if(this.content == ''){
			this.$Message('评论不能为空');
			return false;
		}

		// 发送请求
		this.axios.post('http://localhost:8000/insertcomment/', this.qs.stringify({
			  content: this.content,
			  uid: localStorage.getItem('uid'),
			  gid: this.id
			})).then((result) =>{

			  console.log(result);
			  this.$Message(result.data.message);
			  
			  if (result.data.code == 200){
				  // 将评论内容和作者实时填充到评论容器中 unshift(头部插入) push(尾部插入)
				  this.commentlist.unshift({'uid': localStorage.getItem('uid'), 'content': this.content});

				  this.content = '';
			  }
      	})
	},

	// 商品信息接口
	getdata: function () {
		// 发送请求
		this.axios.get('http://localhost:8000/goodinfo/',{
			params: {
			  id: this.id,
			}}).then((result) =>{

			  console.log(result);
			  
			  this.name = result.data.name;
			  this.desc = result.data.desc;
			  this.price = result.data.price;
			  this.img = result.data.img;

			  var parms = result.data.parms;
			  // 转换类型
			  parms = JSON.parse(parms);
			  
			  this.color = parms.color;
              this.size = parms.size;
              this.season = parms.season;
              this.src = 'http://localhost:8000/static/upload/' + result.data.img;
			  console.log(parms);
      	})
	},
  }
}


</script>
 
<style>



</style>